<template>
  <div class="carousel">
    <div class="carousel_abbreviate">
      <div v-for="(item, index) in list" :key="item.id" :class="['carousel_abbreviate_item', abbreviateActive(index) && item.imgUrl ? 'is--active': '']" @click="changeActiveIndexTop(index)" @mouseover="scrollImgStop" @mouseout="scrollImg">
        <img :src="item.imgUrl" alt="">
      </div>
    </div>
    <div class="carousel_show">
      <div class="carousel_arrow_left">
        <img src="~@//assets/img/container/arrow.png" alt="" @click="lastImg" @mouseover="scrollImgStop" @mouseout="scrollImg">
      </div>
      <transition name="fade">
        <div class="carousel_show_swiper" @mouseover="scrollImgStop" @mouseout="scrollImg">
          <div v-for="(item, index) in list" :key="item.id" :style="[config5[index], activeIndex===index && item.imgUrl? {height: '100%', top: 0, width: '20%', marginLeft: '-4.5px'}: '']" :class="[activeIndex===index&&item.imgUrl?'is--active':'', 'aa']">
            <div class="carousel_show_item" @dblclick="$emit('dblclickItem', item)" @click="changeActiveIndex(item)">
              <img :src="item.imgUrl" alt="">
            </div>
            <div class="carousel_show_item_title">{{ item.ENTERPRISENAME }}</div>
          </div>
        </div>
      </transition>
      <div class="carousel_arrow_right">
        <img src="~@//assets/img/container/arrow.png" alt="" @click="nextImg" @mouseover="scrollImgStop" @mouseout="scrollImg">
      </div>
    </div>
    <div class="container_dot">
      <div v-for="(item,index) in dotLength" :key="index" :class="index+1 === dot ? 'is--active':'default'" @click="changeDotIndex(index)" @mouseover="scrollImgStop" @mouseout="scrollImg" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Carousel',
  props: {
    list: {
      default: () => [],
      type: Array
    },
    value: {
      default: () => ({}),
      type: Object
    },
    setTimeStart: {
      default: () => false,
      type: Boolean
    }
  },
  data() {
    return {
      // showList: [],
      activeIndex: 0,
      dot: 1,
      dotLength: 0,
      config5: [
        {
          id: 'B',
          top: '5%',
          left: '-20%',
          opacity: 0,
          transition: '.4s',
          position: 'absolute',
          // width: '16%',
          height: '90%',
          zIndex: 0
        },
        {
          id: 'B',
          top: '5%',
          left: '0%',
          opacity: 1,
          transition: '.4s',
          position: 'absolute',
          // width: '16%',
          height: '90%',
          zIndex: 1
        },
        {
          id: 'center',
          top: '5%',
          left: '20%',
          opacity: 1,
          transition: '.4s',
          position: 'absolute',
          // width: '16%',
          height: '90%',
          zIndex: 2
        },
        {
          id: 'D',
          top: '5%',
          left: '50%',
          transform: 'translateX(-50%)',
          opacity: 1,
          transition: '.4s',
          // width: '16%',
          height: '90%',
          position: 'absolute',
          zIndex: 4
        },
        {
          id: '-A',
          top: '5%',
          left: '60%',
          // right: '20%',
          opacity: 1,
          transition: '.4s',
          position: 'absolute',
          // width: '16%',
          height: '90%',
          zIndex: 2
        },
        {
          id: 'A',
          top: '5%',
          left: '80%',
          // right: 0,
          opacity: 1,
          transition: '.4s',
          position: 'absolute',
          // width: '16%',
          height: '90%',
          zIndex: 1
        },
        {
          id: 'A',
          top: '5%',
          left: '100%',
          // right: '-20%',
          opacity: 0,
          transition: '.4s',
          position: 'absolute',
          // width: '16%',
          height: '90%',
          zIndex: 0
        }],
      listLength: 0,
      setIntervalBool: false
    };
  },
  computed: {
    abbreviateActive() {
      const a = this.activeIndex;
      const b = this.list.length;
      return (index) => {
        if (a > 1 && a + 2 < b) {
          if ([a - 2, a - 1, a, a + 1, a + 2].includes(index)) {
            return true;
          }
        } else if (a < 2) {
          if ([a - 2, a - 1, a, a + 1, a + 2, b + a - 2, b + a - 1].includes(index)) {
            return true;
          }
        } else if (a + 2 === b) {
          if ([a, a - 1, a - 2, a + 1, b - a - 2].includes(index)) {
            return true;
          }
        } else {
          if ([a, a - 1, a - 2, a + 1, b - a, b - a - 1].includes(index)) {
            return true;
          }
        }
      };
    }
  },
  watch: {
    // 选中的图片发生变化
    activeIndex: {
      handler(newValue, oldValue) {
        const L = this.list.length;
        if (newValue > oldValue) {
          const step = newValue - oldValue;
          if (step * 2 < L) {
            this.next(step);
          } else {
            this.prev(L - step);
          }
        } else {
          const step = oldValue - newValue;
          if (step * 2 < L) {
            this.prev(step);
          } else {
            this.next(L - step);
          }
        }
      }
      // immediate: true
    },
    list() {
      this.getShowList();
      if (this.listLength !== this.list.length) {
        this.listLength = this.list.length;
        this.dotLength = Math.ceil(this.list.length / 5);
        this.addCardStyle();
        this.config5.push(this.config5.shift());
        this.config5.push(this.config5.shift());
        this.config5.push(this.config5.shift());
        this.list.forEach((item, index) => {
          item.index = index;
        });
      }
    },
    setTimeStart(a) {
      a && this.scrollImg();
    }
  },
  created() {
    this.getShowList();
    // this.addCardStyle();// 加入样式位置的index
  },
  beforeDestroy() {
    clearInterval(this.scrollTime);
  },
  methods: {
    addCardStyle() {
      if (this.list.length > this.config5.length) {
        const addtime = this.list.length - this.config5.length;
        for (let i = 0; i < addtime; i++) {
          this.config5.push({
            id: 'center',
            position: 'absolute',
            width: '16%',
            height: '100%',
            top: '0px',
            left: '50%',
            transform: 'translateX(-50%)',
            opacity: 0,
            transition: '.1s'
          });
        }
      }
    },
    getShowList() {
      this.dot = Math.ceil((this.activeIndex + 1) / 5);
      this.$emit('input', this.list[this.activeIndex] || {});
    },

    nextImg() {
      if (this.activeIndex === this.list.length - 1) {
        this.activeIndex = 0;
      } else {
        this.activeIndex++;
      }
    },
    next(step) {
      for (let i = 0; i < step; i++) {
        this.config5.unshift(this.config5.pop());
        for (const val of this.list) {
          if (val.index === 0) {
            val.index = this.list.length - 1;
          } else {
            val.index = val.index - 1;
          }
        }
      }
      this.getShowList();
    },
    prev(step) {
      for (let i = 0; i < step; i++) {
        this.config5.push(this.config5.shift());
        for (const val of this.list) {
          if (val.index === this.list.length - 1) {
            val.index = 0;
          } else {
            val.index = val.index + 1;
          }
        }
      }
      this.getShowList();
    },
    lastImg() {
      if (this.activeIndex === 0) {
        this.activeIndex = this.list.length - 1;
      } else {
        this.activeIndex--;
      }
    },
    changeActiveIndex(item) {
      const cycles = item.index;
      if ([1, 2].includes(item.index)) {
        for (let i = 0; i < cycles; i++) {
          this.nextImg();
        }
      } else if ([0].includes(item.index)) {
        console.log(1);
      } else {
        for (let i = 0; i < this.list.length - cycles; i++) {
          this.lastImg();
        }
      }
    },
    changeDotIndex(index) {
      this.activeIndex = index * 5;
    },
    changeActiveIndexTop(index) {
      this.activeIndex = index;
    },
    scrollImg() {
      this.setTimeStart && !this.setIntervalBool && this.list.length > 0 && this.scrollStart();
    },
    scrollStart() {
      this.setIntervalBool = true;
      this.scrollTime = setInterval(() => {
        this.nextImg();
      }, 5000);
    },
    scrollImgStop() {
      this.setIntervalBool = false;
      clearInterval(this.scrollTime);
    }
  }
};
</script>

<style lang='scss' scoped>
@import './carousel.scss';
</style>
